<script>
import DefaultContentBody from '@/livebos/container/content/DefaultContentBody.vue'
import DefaultEntityBody from '@/livebos/container/entity/DefaultEntityBody.vue'
import DefaultMoreBody from '@/livebos/container/more/DefaultLiveBosMoreBody.vue'
import DefaultEntity from '@/template/entityTemp/defaultEntity.vue'
import DefaultMore from '@/template/DefaultMore.vue'
import CustomAffix from '@/livebos/container/affix/CustomAffix.vue'
export default {
  name: 'LiveBosDashboardIndex',
  components: { DefaultMore, DefaultEntity, DefaultContentBody, DefaultEntityBody, DefaultMoreBody, CustomAffix },
  computed: {
    // 采用哪个布局，便于后期切换
    layout() {
      return DefaultContentBody
    },
    // 主题信息，用于主题切换
    theme() {
      return this.$store.getters.theme
    }
  },
  watch: {
    // 监听主题变化
    theme: {
      handler(newVal, oldVal) {
        const app = document.querySelector('body')
        if (undefined !== newVal) {
          app.classList.add('theme-' + newVal + '-content')
        }
        if (undefined !== oldVal) {
          app.classList.remove('theme-' + oldVal + '-content')
        }
      },
      deep: true
    }
  },
  created() {
    // 初始化默认主题
    const app = document.querySelector('body')
    const theme = this.$store.getters.theme === undefined ? 'default' : this.$store.getters.theme
    app.classList.add('theme-' + theme + '-content')
  }
}
</script>

<template>
  <div class="live-bos-body">
    <component :is="layout" />
    <default-entity />
    <default-more />
    <!-- 固定显示项 -->
    <div class="custom-layout-affix">
      <custom-affix />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.live-bos-body {
  width: 100%;
  height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-y: auto;
}
.custom-layout-affix {
  width: 66px;
  position: fixed;
  top: 50%;
  right: 8px;
  z-index: 1;
  min-height: 66px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  background-color: var(--edu-bk-100);
}
</style>
